<template>
    <div class="history">
<!--        <p class="title" v-if="show"><span class="lshc"><img :src="lshc" alt="">历史回测</span><router-link tag="span" to="/home/more" class="getmore"><img :src="getmore" alt=""></router-link></p>-->

        <div class="block">
            <el-timeline>
                <van-list v-model="loading" :finished="finished" @load="onLoad" finished-text="没有更多了">
                    <el-timeline-item
                            v-for="(l, index) in list"
                            :key="index"
                            :type="activities.type"
                            :color="activities.color"
                            :size="activities.size"
                            :timestamp="l.time"
                            :hide-timestamp="activities.hide">

                        <div class="history-content">
                            <div class="list-name">
                                <span class="name">{{l.title}}</span>
                                <span class="time">{{l.time|formatDate}}</span>
                            </div>
                            <div class="list-content">{{l.content}}</div>
                            <!--                        <div class="data-from">数据来源：baidu.com</div>-->
                        </div>
                    </el-timeline-item>
                </van-list>
            </el-timeline>
        </div>
    </div>
</template>

<script>
    import lshc from "../../assets/img/icon_lshc.png"
    import getmore from "../../assets/img/icon_getmore.png"
    export default {
        name: "List",
        props:['model'],
        data(){
            return {
                lshc:lshc,
                getmore:getmore,
                activities: {
                    content: '',
                    timestamp: '2018-04-03 20:46',
                    size: 'normal',
                    type: 'primary',
                    color: '#0bbd87',
                    hide:true
                },
                list:[],
                page:1,
                loading: false,//控制上拉加载的加载动画
                finished: false,//控制在页面往下移动到底部时是否调用接口获取数据
                isLoading: false,//控制下拉刷新的加载动画
            }
        },
        mounted() {
            this.getList()
        },
        watch:{
            "model":function () {
                this.page = 1
                this.list = []
                this.loading = false
                this.finished = false
                this.isLoading = false
                this.getList()
            }
        },
        methods:{
            getList(){
                let data = {
                    token:this.getCookie("token"),
                    page:this.page,
                    model:this.model
                }
                this.$api.home.GetMessage(data).then(res=> {
                    // 执行某些操作
                    this.list = res.data.data
                    if(res.data.data.length<1){
                        this.$router.push({path:'/message'})
                    }

                })
            },
            onLoad() {
                let self = this;

                    setTimeout(() => {
                        let data = {
                            token:this.getCookie("token"),
                            page:this.page,
                            model:this.model
                        }
                        self.$api.home.GetMessage(data).then(res=> {
                            // 执行某些操作
                            if(this.page>1){
                                self.list = self.list.concat(res.data.data);
                            }

                            self.loading = false;
                            self.page++;
                            if (res.data.data.length<10) {
                                self.finished = true;
                            }

                        })

                    }, 500);

            }
        }
    }
</script>

<style scoped>
    .history{
        padding: 0.5rem 1rem;
        margin: 0 auto;
        background: #fff;
        z-index: 0;
    }
    .title{
        height: 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #EEEEEE;
        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        margin: 0 0 1rem 0!important;
    }
    .title span{
        display: inline-flex;
        align-items: center;
    }
    .title .lshc{
        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
    }
    .title .lshc img{
        width: 1rem;
        margin-right: 0.5rem;
    }
    .title .getmore img{
        width: 0.44rem;
    }
    .history .block{
        /*margin-top: 1rem!important;*/
    }
    .history-content{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
    }
    .history-content>div{
        width: 100%;
    }
    .list-name{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .list-name .name{
        font-size:0.81rem;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(20,163,101,1);
    }
    .list-name .name span{
        font-size: 0.64rem;
    }
    .list-name .time{
        font-size:0.69rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(153,153,153,1);
    }
    .list-content{
        margin: 1rem 0 0.5rem 0;
        font-size:0.81rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        text-align: left;
    }
    .data-from{
        font-size:0.63rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(153,153,153,1);
        text-align: right;
    }

</style>
<style>
    .el-timeline-item__node--normal{
        width: 0.38rem!important;
        height: 0.38rem!important;
        left: 2px!important;
    }

    .el-timeline-item__wrapper{
        padding-left: 18px!important;
        top: 3px!important;
    }

</style>











